<template>
	<div class="useradmin">
		<div class="inpbox">
			<div>
				<el-input class="inp1" v-model="admin" @keyup.native.enter="searchcenter"
					placeholder="输入用户名"></el-input>
				<el-input class="inp1" v-model="phone" @keyup.native.enter="searchcenter"
					placeholder="输入联系方式"></el-input>
				<el-button class="inp2" type="primary" @click="searchcenter" icon="el-icon-search">搜索</el-button>
			</div>
			<el-button class="inp3" @click="addAdminBtn()" type="primary"
				icon="el-icon-circle-plus-outline">添加</el-button>
		</div>
		<el-table class="el_table" :data="admintable">
			<el-table-column label="头像" prop="iserIcon" width="180">
				<template slot-scope="scope">
					<!-- {{baseUrl+scope.row.iserIcon}} -->
					<img class="img1" :src="baseUrl+scope.row.iserIcon" alt="" />
				</template>
			</el-table-column>
			<el-table-column prop="adminName" label="用户名" width="180">
			</el-table-column>
			<el-table-column prop="adminAccount" label="账号">
			</el-table-column>
			<el-table-column prop="adminPhone" label="联系方式">
			</el-table-column>
			<el-table-column prop="address" label="操作">
				<template slot-scope="scope">
					<el-button style="padding: 7px 10px;font-size: 12px;" @click="editAdmin(scope.row)" type="primary">修改</el-button>
					<el-button style="padding: 7px 10px;font-size: 12px;" @click="deleAdmin(scope.row)" type="danger">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination class="page" :page-size="pageSize" layout="prev, pager, next" :current-page="pageIndex" @current-change="changepage"
			:total="total">
		</el-pagination>
		<!-- 添加模态框 -->
		<el-dialog title="添加管理员" :visible.sync="dialogVisible" width="40%" class="el_dialog">
			<el-form :model="dialoginfo" :rules="rules" ref="dialoginfo">
				<div class="">
					<el-form-item class="inpbox" prop="imageUrl">
						<!-- {{dialoginfo.imageUrl}} -->
						<label style="margin-left: -50px;margin-top: 5px;" for="">选择头像 :</label>
						<el-upload style="margin-left: 20px;" ref="upload"
							:action="baseUrl+'admin/addAdmin'" 
							:data="myData" 
							:show-file-list="false"
							:auto-upload="false" 
							:on-success="successadd"
							:on-change="handleChange"
							:on-error="erroradd"
							:before-upload="beforeAvatarUpload">
							<el-button style="padding: 0;" slot="trigger" v-if="!dialoginfo.imageUrl"
								class="el-icon-plus avatar-uploader-icon"></el-button>
							<img slot="trigger" v-if="dialoginfo.imageUrl" :src="dialoginfo.imageUrl" class="avatar">
						</el-upload>
					</el-form-item>
					<el-form-item class="inpbox" prop="adminName">
						<label for="">用户名 :</label>
						<el-input placeholder="请输入用户名" v-model="dialoginfo.adminName"></el-input>
					</el-form-item>
					<el-form-item class="inpbox" prop="adminAccount">
						<label for="">账号 :</label>
						<el-input placeholder="请输入账号" v-model="dialoginfo.adminAccount"></el-input>
					</el-form-item>
					<el-form-item class="inpbox" prop="adminPassword">
						<label for="">密码:</label>
						<el-input placeholder="请输入密码" type="password" v-model="dialoginfo.adminPassword"></el-input>
					</el-form-item>
					<el-form-item class="inpbox" prop="adminPhone">
						<label for="">联系方式 :</label>
						<el-input placeholder="请输入联系方式" v-model="dialoginfo.adminPhone"></el-input>
					</el-form-item>
					<span class="dialog-footer">
						<el-button class="primary" type="primary" @click="addAdmin('dialoginfo')" >确 定</el-button>
						<el-button class="cancle" @click="dialogVisible = false">取 消</el-button>
					</span>
				</div>
			</el-form>
		</el-dialog>
		<!-- 修改模态框 -->
		<el-dialog title="修改管理员" :visible.sync="dialogVisible2" width="40%" class="el_dialog">
			<el-form :model="editdialoginfo" :rules="rules" ref="editdialoginfo">
				<div class="">
					<el-form-item class="inpbox" prop="imageUrl">
						
						<!-- :auto-upload="false" -->
						<!-- http://localhost:8081/admin/changeAdmin -->
						<label for="" style="margin-left: -50px;margin-top: 10px;">选择头像 :</label>
							<el-upload style="margin-left: 15px;" ref="upload1"
								:action="baseUrl+'admin/changeAdmin'" 
								:data="myChangeData"
								:show-file-list="false"
								:auto-upload="false"
								:on-success="submitsuccess"
								:on-change="edithandleChange"
								:before-upload="beforeAvatarUpload"
								>
								<img slot="trigger" :src="qianzhui+editdialoginfo.imageUrl" class="avatar">
								<!-- <img slot="trigger" v-if="flag1" :src="baseUrl+editdialoginfo.imageUrl" class="avatar"> -->
								<!-- {{editdialoginfo.imageUrl}} -->
							</el-upload>
						
					</el-form-item>
					<el-form-item class="inpbox" prop="adminName">
						<label for="">昵称 :</label>
						<el-input placeholder="请输入昵称" v-model="editdialoginfo.adminName"></el-input>
					</el-form-item>
					<el-form-item class="inpbox" prop="adminAccount">
						<label for="">账号 :</label>
						<el-input placeholder="请输入账号" v-model="editdialoginfo.adminAccount"></el-input>
					</el-form-item>
					<el-form-item class="inpbox" prop="adminPhone">
						<label for="">手机号 :</label>
						<el-input placeholder="请输入手机号" v-model="editdialoginfo.adminPhone"></el-input>
					</el-form-item>
					<el-form-item class="inpbox" prop="adminId">
						<label for="">管理员id :</label>
						<el-input placeholder="请输入管理员id" v-model="editdialoginfo.adminId"></el-input>
					</el-form-item>
					<el-form-item class="inpbox" prop="adminPassword">
						<label for="">密码 :</label>
						<el-input placeholder="请输入密码" type="password" v-model="editdialoginfo.adminPassword"></el-input>
					</el-form-item>
					<span class="dialog-footer">
						<el-button class="primary" type="primary" @click="changeAdmin('editdialoginfo')" >确 定</el-button>
						<el-button class="cancle" @click="dialogVisible2 = false" >取 消</el-button>
					</span>
				</div>
			</el-form>
		</el-dialog>
		
	</div>
</template>

<script>
	import {
		number
	} from 'echarts'
	export default {
		data() {
			return {
				baseUrl: require("../assets/baseUrl.js").baseUrl,
				dialogVisible: false,
				dialogVisible2:false,
				admintable: [],
				pageSize: 5,
				pageIndex: 1,
				total: 0,
				qianzhui:require("../assets/baseUrl.js").baseUrl,
				pic: require("../assets/1.jpg"),

				adminName: "",
				adminPhone: "",
				//条件搜索
				admin: "",
				phone: "",
				//模态框
				dialoginfo: {
					//formdata地址
					imageUrl: "",
					adminName: "",
					adminAccount: "",
					adminPassword: "",
					adminPhone: ""
				},
				editdialoginfo:{
					imageUrl: "",
					adminName:"",
					adminAccount:"",
					adminPhone: "",
					adminId:"",
					adminPassword: "",
				},
				rules: {
					imageUrl: [{
						required: true,
						message: "图片不能为空!",
						trigger: "blur"
					}],
					adminName: [{
						required: true,
						message: "姓名不能为空!",
						trigger: "blur"
					}],
					adminAccount: [{
						required: true,
						message: "账号不能为空!",
						trigger: "blur"
					}],
					adminPhone: [{
						required: true,
						message: "电话不能为空!",
						trigger: "blur"
					},
					{
						pattern: /^\d{11}$/,
						message: '请输入11位数字',
						trigger: 'blur'
					}],
				},
				myData: {},
				myFile: {},
				flag1:true,
				flag2:true,
				myChangeData:{}

			}
		},
		methods: {
			//分页改变每页的数据
			changepage(page) {
				this.pageIndex = page
				this.adminName = this.admin
				this.adminPhone = this.phone
				this.Search()
			},
			searchcenter() {
				this.pageIndex = 1
				this.adminName = this.admin
				this.adminPhone = this.phone
				this.Search()
			},
			//按用户名/手机号搜索
			Search() { //http://localhost:8081/admin/searchAdmin
				this.$http.post(this.baseUrl + "admin/searchAdmin", {
					adminName: this.adminName,
					adminPhone: this.adminPhone,
					pageSize: this.pageSize,
					pageIndex: Number(this.pageIndex)
				}).then(res => {
					// console.log(res)
					if (res.data.code == 200) {
						this.admintable = res.data.data.context
						this.total = res.data.data.pageTotal * this.pageSize
					}
				})
			},
			//删除管理员 
			deleAdmin(options) { // http://localhost:8081/admin/dele
				this.$confirm('此操作将删除该管理员, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//删除接口
					this.$http.post(this.baseUrl + "admin/dele", {
						adminId: Number(options.adminId)
					}).then(res => {
						// console.log(res)
						this.$message.success("删除管理员成功")
						this.searchcenter()
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				})

			},
			// 查看所有管理员
			getAlladmin() { //  http://localhost:8081/admin/showAdmin
				this.$http.post(this.baseUrl + "admin/showAdmin", {
					pageSize: this.pageSize,
					pageIndex: this.pageIndex
				}).then(res => {
					// console.log(res.data.data)
					if (res.data.code == 200) {
						this.admintable = res.data.data.context
						this.total = res.data.data.pageTotal * this.pageSize
					}
				}).catch(res => {
					// console.log("查询所有管理员出错")
				})
			},
			addAdminBtn(){
				// 清空模态框
				this.dialoginfo.imageUrl = ""
				this.dialoginfo.adminName=""
				this.dialoginfo.adminAccount=""
				this.dialoginfo.adminPassword=""
				this.dialoginfo.adminPhone=""
				this.dialogVisible = true	
			},
			// 添加管理员 http://localhost:8081/admin/addAdmin
			addAdmin(formName) {
				//检查是否每个内容是否不为空
				this.$refs[formName].validate((valid) => {
					if (valid) {
						//关闭模态框
						this.dialogVisible = false
						//传递的data值
						this.myData = {
							adminName: this.dialoginfo.adminName,
							adminAccount: this.dialoginfo.adminAccount,
							adminPhone: this.dialoginfo.adminPhone,
							adminPassword: this.dialoginfo.adminPassword
						}
								// //上传的方法
								let _this = this
								//延时器
								setTimeout(res => {
									_this.$refs.upload.submit();
								})
						
					} else {
						// console.log('error submit!!');
						return false;
					}
				});
			},
			erroradd(err, file, fileList){
				//console.log(err,file,fileList)
			},
			successadd(){
				if(this.flag2){
					this.$message.success("添加成功!")
				}
				this.getAlladmin()
			},
			handleChange(file, fileList) {
				this.dialoginfo.imageUrl = URL.createObjectURL(file.raw);
				// console.log(this.dialoginfo.imageUrl)
				if(file.response!=undefined){
					//console.log(file, fileList)
					if(file.response.code==500){
						this.$message.error(file.response.msg)
						this.flag2=false
					}
					
				}
			},
			//修改模态框中赋值
			editAdmin(option){
				// console.log(option)
				this.dialogVisible2=!this.dialogVisible2
				this.editdialoginfo.imageUrl=option.iserIcon
				
				this.editdialoginfo.adminName=option.adminName
				this.editdialoginfo.adminAccount=option.adminAccount
				this.editdialoginfo.adminPhone=option.adminPhone
				this.editdialoginfo.adminId=option.adminId
				this.editdialoginfo.adminPassword=""
				this.qianzhui=this.baseUrl
			},
			changeAdmin(formName){
				
				this.$refs[formName].validate((valid) => {
					if (valid) {
						var s=this.editdialoginfo.imageUrl+""
						if(s.substring(0,4)=="blob"){
							if(this.editdialoginfo.adminPassword==""){
								this.editdialoginfo.adminPassword=""
							}
							
							if(this.editdialoginfo.adminId==sessionStorage.getItem("adminId")){
								this.tuichu()
							}
							//传递的data值
							this.myChangeData={
								adminName:this.editdialoginfo.adminName,
								adminAccount:this.editdialoginfo.adminAccount,
								adminPhone:this.editdialoginfo.adminPhone,
								adminId:this.editdialoginfo.adminId,
								adminPassword:this.editdialoginfo.adminPassword
							}
							this.dialogVisible2=false
							
							//上传的方法
							let _this = this
							//延时器
							setTimeout(res => {
								_this.$refs.upload1.submit();
							})

						}else{
							if(this.editdialoginfo.adminId==sessionStorage.getItem("adminId")){
								this.tuichu()
							}
							this.$http.post(this.baseUrl+"admin/changeAdmin",{
								adminName:this.editdialoginfo.adminName,
								adminAccount:this.editdialoginfo.adminAccount,
								adminPhone:this.editdialoginfo.adminPhone,
								adminId:this.editdialoginfo.adminId,
								adminPassword:this.editdialoginfo.adminPassword
							},{headers: {'Content-Type': 'multipart/form-data'}}).then(res=>{
								if(res.data.code==200){
									this.$message.success("修改成功")
									this.getAlladmin()
									this.dialogVisible2=false
								}else if(res.data.code==500){
									this.$message.error(res.data.msg)
									this.getAlladmin()
									this.dialogVisible2=false
								}
								
								
							})
						}
						
					} else {
						// console.log('error submit!!');
						return false;
					}
				});
				
				
				
			},
			submitsuccess(){
				if(this.flag1){
					this.$message.success("修改成功")
				}
				this.getAlladmin()
			},
			edithandleChange(file, fileList){
				this.editdialoginfo.imageUrl = URL.createObjectURL(file.raw);
				this.qianzhui=""
				
				if(file.response!=undefined){
					// console.log(file, fileList)
					if(file.response.code==500){
						this.$message.error(file.response.msg)
						this.flag1=false
					}
				}
			},
			beforeAvatarUpload(file) {
				const isJPG = (file.type == "image/jpg" || file.type == "image/jpeg" || file.type == "image/png" || file.type == "image/gif");
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
					this.$message.error('上传头像图片只能是 JPG、PNG、GIF 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			},
			tuichu(){
				this.$http.post(this.baseUrl + "admin/changeLog", {
				    adminId: sessionStorage.getItem("adminId"),
				    logStatus: 0
				}).then(res => {
				    sessionStorage.clear();
				    this.dialogVisible = false;
				    this.$router.push("/login");
				});
			}
		},
		mounted() {
			this.getAlladmin()
		}
	}
</script>

<style>
	.useradmin .inpbox {
		margin-bottom: 20px;
		display: flex;
		justify-content: space-between;
	}

	.useradmin .inpbox .inp1 {
		margin-left: 30px;
		width: 230px;
		float: left;
	}

	.useradmin .inpbox .inp2 {
		margin-left: 30px;
		float: left;
	}

	.useradmin .inpbox .inp3 {
		margin-right: 60px;
		float: right;
	}

	/* 表格 */
	.useradmin .el-table .el-table__cell {
		text-align: center;
	}

	.useradmin .el-table .touxiang {
		width: 50px;
		height: 50px;
		border-radius: 50px;
	}

	.useradmin .el-table .edit {
		font-size: 13px;
		margin-right: 10px;
		color: royalblue;
		cursor: pointer;
	}

	.useradmin .el-table .dele {
		font-size: 13px;
		color: red;
		cursor: pointer;
	}

	.useradmin .page {
		margin-top: 30px;
		text-align: center;
	}

	/* 模态框 */
	.useradmin .el_dialog img {
		width: 60px;
		height: 60px;
		border-radius: 50px;
	}

	.useradmin .el_dialog .el-form-item__content {
		display: flex;
		width: 100%;
	}

	.useradmin .el_dialog label {
		width: 40%;
		text-align: right;
		line-height: 40px;
	}

	.useradmin .el_dialog input {
		height: 40px;
		width: 60%;
		margin-left: 20px;
	}

	.useradmin .el_dialog .el-form-item__error {
		left: 18%;
		text-align: left;
	}

	.useradmin .dialog-footer {
		display: flex;
		justify-content: center;
	}
	.useradmin .img1{
		width: 50px;
		height: 50px;
		border-radius: 50px;
	}
</style>